<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="/webjars/jquery/2.2.4/jquery.js"></script>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<body>
<div id="vuebox">
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline" role="form" style="padding-left: 250px;">
                <div class="form-group" style="padding-left: 20px;">
                    <label>起飞城市:</label>
                    <select class="form-control" v-model="departurecity">
                        <option value="0">请选择起飞城市</option>
                        <option v-for="item in cityList.data" :value="item.id">{{item.cityname}}</option>
                    </select>
                    <label>到达城市:</label>
                    <select class="form-control" v-model="arrivalcity">
                        <option value="0">请选择到达城市</option>
                        <option v-for="item in cityList.data" :value="item.id">{{item.cityname}}</option>
                    </select>
                </div>
                <div class="form-group"  style="padding-left: 20px;">
                    <button type="button" class="btn btn-primary" @click="selbtn()">查询</button>
                </div>
            </form>
        </div>

        <div class="col-md-4 text-right">
            <a class="btn btn-primary" @click="showModal()">新增</a>
        </div>
    </div>

    <br>
    <table class="table table-bordered container">
        <thead>
        <tr>
            <th>航班编号</th>
            <th>起飞城市</th>
            <th>起飞时间</th>
            <th>到达城市</th>
            <th>到达时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in flightList">
            <td>{{item.flightno}}</td>
            <td>{{item.departurename}}</td>
            <td>{{item.departuretime}}</td>
            <td>{{item.arrivalname}}</td>
            <td>{{item.arrivaltime}}</td>
        </tr>
        </tbody>
    </table>

    <!--<div class="col-md-12" v-show="!flightList.size">-->
        <!--<h2>非常抱歉，没有找到相关航班!!</h2>-->
    <!--</div>-->

    <!--模态框-->
    <div class="modal" id="mymodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" >&times;</button>
                    <div class="modal-title">
                        航班添加页面
                    </div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="flightno" class="col-sm-2 control-label">飞机编号:</label>
                            <div class="col-sm-10">
                                <input v-model="new_flight.flightno" id="flightno" type="text" class="form-control" placeholder="请输入飞机编号"/>
                            </div>
                        </div>

                        <div class="form-group">
                        <label for="departurecity" class="col-sm-2 control-label">起飞城市:</label>
                        <div class="col-sm-10">
                            <select id="departurecity" class="form-control" v-model="new_flight.departurecity">
                                <option value="0">请选择起飞城市</option>
                                <option v-for="item in cityList.data" :value="item.id">{{item.cityname}}</option>
                            </select>
                        </div>
                    </div>
                        <div class="form-group">
                            <label for="arrivalcity" class="col-sm-2 control-label">到达城市:</label>
                            <div class="col-sm-10">
                                <select id="arrivalcity" class="form-control" v-model="new_flight.arrivalcity">
                                    <option value="0">请选择到达城市</option>
                                    <option v-for="item in cityList.data" :value="item.id">{{item.cityname}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="departuretime" class="col-sm-2 control-label">起飞时间:</label>
                            <div class="col-sm-10">
                                <input v-model="new_flight.departuretime" id="departuretime" type="text" class="form-control" placeholder="请输入起飞时间">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="arrivaltime" class="col-sm-2 control-label">到达时间:</label>
                            <div class="col-sm-10">
                                <input v-model="new_flight.arrivaltime" id="arrivaltime" type="text" class="form-control" placeholder="请输入到达时间"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" @click="hideModal(),clearForm()">关闭</button>
                    <button class="btn btn-primary" @click="saveModel()">保存</button>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>
<script type="text/javascript">
      var vm=new Vue({
          el:"#vuebox",
          data:{
              departurecity:0,
              arrivalcity:0,
              cityList:{},
              flightList:[],
              new_flight:{flightno:null,departurecity:0,arrivalcity:0,departuretime:null,arrivaltime:null}
          },
          mounted(){
              axios.get("http://localhost:8080/selectCity") .then(res=>this.cityList=res.data)
              this.selectFlight(1);
          },
          methods:{
              selectFlight:function () {
                  axios({url:"http://localhost:8080/selectFlight", method:"get",
                      params:{departurecity:this.departurecity,arrivalcity:this.arrivalcity}})
                      .then(res=>{this.flightList=res.data.fight});
              },
              selbtn:function () {
                  if(this.departurecity!=0){
                      if(this.departurecity==this.arrivalcity){
                          alert("起飞地点不能跟到达地点一样!");
                          this.departurecity=0;
                          this.arrivalcity=0;
                          return false;
                      }
                  }
                  this.selectFlight();
              },
              showModal:function () {
                  this.new_flight={id:null,flightno:null,departurecity:0,arrivalcity:0}
          $('#mymodal').modal('show');
             },
             hideModal:function () {
          $('#mymodal').modal('hide');
              },
            clearForm:function () {
          $('#flightno').val('');
          $('#departurecity').val(0);
          $('#arrivalcity').val(0);
          $('#departuretime').val('');
          $('#arrivaltime').val('');

      },
              saveModel:function () {
                  if(this.new_flight.flightno==null){
                      alert("请输入航班编号!");
                      return false;
                  }
                  if(this.new_flight.departurecity==0){
                      alert("请选择出发地点!");
                      return false;
                  }
                  if(this.new_flight.arrivalcity==0){
                      alert("请选择到达地点!");
                      return false;
                  }
                  if(this.new_flight.departurecity==this.new_flight.arrivalcity){
                      alert("出发地点不能跟到达地点一样!");
                      return false;
                  }
                  axios.post("http://localhost:8080/saveFlight",this.new_flight).then(res=>{
                      if (res.data.result=="SUCCESS"){
                          alert("添加成功!");
                          this.hideModal();
                          this.clearForm();
                          this.selectFlight(1);
                      }
                  })
              }
          }
      });
</script>
<!--saveFlight-->